<template>
  <!-- 在线监测头部 -->
  <div class="onlie-body bigTableStyle">
    <el-form :inline="true" :model="formInline" label-width="1rem">
      <el-row>
        <el-col :span="4">
          <el-form-item label="单位明称:">
            <el-select v-model="formInline.region" placeholder="单位名称">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="变电站:">
            <el-select v-model="formInline.region" filterable placeholder="变电站">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="装置厂家:">
            <el-input v-model="formInline.user" placeholder="输入名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="监测类型:">
            <el-input v-model="formInline.user" placeholder="监测类型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="装置名称:">
            <el-input v-model="formInline.user" placeholder="装置名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="监测设备:">
            <el-select v-model="formInline.region" placeholder="监测设备">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="电压等级:">
            <el-select v-model="formInline.region" placeholder="电压等级">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="装置状态:">
            <el-select v-model="formInline.region" placeholder="装置状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="是否可用:">
            <el-select v-model="formInline.region" placeholder="是否可用">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1" class="btn">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class OnlieHead extends Vue {
  private options: Array<optionList> = [
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
    {
      value: "选项3",
      label: "蚵仔煎",
    },
  ];
  private value: string = "";
  private formInline: object = {
    user: "",
    region: "",
  };
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      value: "",
      formInline: {
        user: "",
        region: "",
      },
    };
  }
  private onSubmit() {
    // console.log("submit!");
  }
}
</script>

<style lang='scss' scoped>
.onlie-body {
  // display: flex;
  // flex-direction: row;
  .btn {
    padding-left: 0.3rem;
  }
}
</style>
<style lang="scss">
.onlie-body {
  .el-form-item {
    margin-bottom: 0.05rem;
  }
  .el-form--inline .el-form-item__content {
    width: 55%
  }
}
</style>

